import { ReactNode, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Home, PenTool, BookOpen, Search, Settings } from 'lucide-react';
import { cn } from '../lib/utils';
import TemplateManager from './TemplateManager';

interface LayoutProps {
  children: ReactNode;
}

const navigation = [
  { name: 'Dashboard', href: '/', icon: Home },
  { name: 'Write Entry', href: '/write', icon: PenTool },
  { name: 'All Entries', href: '/entries', icon: BookOpen },
  { name: 'Search', href: '/search', icon: Search },
];

export const Layout = ({ children }: LayoutProps) => {
  const location = useLocation();
  const [showTemplateManager, setShowTemplateManager] = useState(false);

  return (
    <div className="min-h-screen bg-cream">
      {/* Sidebar */}
      <div className="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg">
        <div className="flex h-full flex-col">
          {/* Logo */}
          <div className="flex h-16 items-center justify-center border-b border-gray-200">
            <h1 className="text-2xl font-inter font-bold text-forest-green">
              My Diary
            </h1>
          </div>
          
          {/* Navigation */}
          <nav className="flex-1 space-y-1 px-4 py-6">
            {navigation.map((item) => {
              const isActive = location.pathname === item.href;
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={cn(
                    'group flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors',
                    isActive
                      ? 'bg-forest-green text-white'
                      : 'text-warm-gray hover:bg-sage hover:text-white'
                  )}
                >
                  <item.icon
                    className={cn(
                      'mr-3 h-5 w-5 flex-shrink-0',
                      isActive ? 'text-white' : 'text-warm-gray group-hover:text-white'
                    )}
                  />
                  {item.name}
                </Link>
              );
            })}
            
            {/* Template Manager Button */}
            <button
              onClick={() => setShowTemplateManager(true)}
              className="group flex items-center w-full px-3 py-2 text-sm font-medium rounded-lg transition-colors text-warm-gray hover:bg-sage hover:text-white"
            >
              <Settings className="mr-3 h-5 w-5 flex-shrink-0 text-warm-gray group-hover:text-white" />
              Template Manager
            </button>
          </nav>
          
          {/* Footer */}
          <div className="border-t border-gray-200 p-4">
            <p className="text-xs text-warm-gray text-center">
              Your private space for thoughts
            </p>
          </div>
        </div>
      </div>
      
      {/* Main content */}
      <div className="pl-64">
        <main className="py-8 px-8">
          {children}
        </main>
      </div>
      
      {/* Template Manager Modal */}
      {showTemplateManager && (
        <TemplateManager onClose={() => setShowTemplateManager(false)} />
      )}
    </div>
  );
};